<% @page_title = "2FA - Security Keys" %>

<% @page_message = "Verify your sign in" %>

<form
  class="rodauth space-y-6"
  role="form"
  method="POST"
  action="<%= rodauth.webauthn_auth_form_path %>"
  id="webauthn-auth-form"
  data-credential-options="<%= (cred = rodauth.webauthn_credential_options_for_get).as_json.to_json %>"
>
  <%== rodauth.webauthn_auth_additional_form_tags %>
  <%== rodauth.csrf_tag(rodauth.webauthn_auth_form_path) %>
  <%== part("components/form/hidden", name: rodauth.webauthn_auth_challenge_param, value: cred.challenge) %>
  <%== part(
    "components/form/hidden",
    name: rodauth.webauthn_auth_challenge_hmac_param,
    value: rodauth.compute_hmac(cred.challenge)
  ) %>
  <input id="webauthn-auth" class="hidden" type="text" name="<%= rodauth.webauthn_auth_param %>" value="" hidden/>
  <div id="webauthn-auth-button" class="flex flex-col text-center">
    <%== part("components/form/submit_button", text: rodauth.webauthn_auth_button) %>
  </div>
  <p class="mt-10 text-center text-sm text-gray-400">
    Can't access your authentication app?
    <br>
    <a href="/<%= rodauth.recovery_auth_route %>" class="font-semibold leading-6 text-orange-500 hover:text-orange-700">Enter a recovery code</a>
    or
    <a href="mailto:support@ubicloud.com" class="font-semibold leading-6 text-orange-500 hover:text-orange-700">contact support</a>
  </p>
</form>
<script src="<%= "#{rodauth.webauthn_js_host}#{rodauth.webauthn_auth_js_path}" %>"></script>
